<template>
  <view class="custom-tui-conversation" @touchmove.stop.prevent="()=>{}">
  	<view class="custom-navbar display-flex just-between">
		<image src="https://cdnauth.dreamyuewen.com/images/back.png" mode="aspectFit" style="width: 10px;height: 20px;" @tap="$back"></image>
  		<view class="display-flex toonei" v-if="currentConversationID != 'C2Cwritermsg' &&currentConversationID != 'C2Chudongmsg' && currentConversationID != 'C2Cadministrator'  && currentConversationID != 'C2Csysmsg'">
  			<image :src="userItem.pic | formatImgUrl" mode="aspectFill" class="headpic"></image>
  			<view class="tocen" >
  				<view class="totop">
  					<view class="name">
  						{{userItem.username}}
  					</view>
					<image
						:src="$options.filters.formatImgUrl(userItem.writer_level.is_active?userItem.writer_level.level.image:userItem.writer_level.level.hide_img)"
						@click.stop="$go('/pages/user/grade?uid='+userItem.membe_id)"
						class="jipic" mode=""
						v-if="userItem && userItem.is_writer">
					</image>
					<image
						:src="$options.filters.formatImgUrl(userItem.user_level.active_day>0?userItem.user_level.level.image:userItem.user_level.level.hide_img)"
						class="biepic" mode=""
						v-if="userItem.is_vip&&userItem.user_level.is_active">
					</image>
  				</view>
  				<view class="display-flex">
  					<block v-if="userItem.is_line == 1">
  						<view class="dian"></view>
  						<view class="txt">
  							当前在线
  						</view>
  					</block>
  					<block v-else>
  						<view class="dian2"></view>
  						<view class="txt2">
  							{{userItem.line_time_str}}
  						</view>
  					</block>
  				</view>
  			</view>
  		</view>
		
		<view class="nav-title">
			<block v-if="currentConversationID == 'C2Chudongmsg'">
				互动通知
			</block>
			<block v-if="currentConversationID == 'C2Csysmsg'">
				系统通知
			</block>
			<block v-if="currentConversationID == 'C2Cadministrator'">
				订单通知
			</block>
			<block v-if="currentConversationID == 'C2Cwritermsg'">
				写手通知
			</block>
		</view>
		
		<view class="display-flex" style="position: relative;" v-if="currentConversationID != 'C2Cwritermsg' &&currentConversationID != 'C2Chudongmsg' && currentConversationID != 'C2Cadministrator'  && currentConversationID != 'C2Csysmsg'">
			<text style="width: 102rpx;height: 40rpx;border-radius: 25px;text-align: center;line-height: 40rpx;color: #45C4B0;font-size: 20rpx;background: #E3F6F3;" @tap="operateFocus(userItem)">{{is_like ? '已关注' : '关注'}}</text>
			<image src="https://cdnauth.dreamyuewen.com/images/bao.png" mode="aspectFit" style="width: 24px;height: 24px;margin-left: 5rpx;" @click="$go('/pages/tim/userinfo?id='+userItem.membe_id)"></image>
		</view>
  	</view>
	
	<div class="chat chat-container" style="background: #F2F5F2" >
	  <div :class="['TUI-chat', !isPC && 'TUI-chat-h5']">
	    <div
	      v-if="!currentConversationID"
	      :class="['TUI-chat-default', !isPC && 'TUI-chat-h5-default']"
	    >
	      <slot></slot>
	    </div>
		
	    <div
	      v-if="currentConversationID"
	      :class="['TUI-chat', !isPC && 'TUI-chat-h5']"
	    >
	      <!-- <ChatHeader
	        :class="[
	          'TUI-chat-header',
	          !isPC && 'TUI-chat-H5-header',
	          isUniFrameWork && 'TUI-chat-uniapp-header',
	        ]"
	        @closeChat="closeChat"
	      ></ChatHeader> -->
			<view class="" v-if="currentConversationID != 'C2Cwritermsg' && currentConversationID != 'C2Chudongmsg' && currentConversationID != 'C2Cadministrator'  && currentConversationID != 'C2Csysmsg'">
				<swiper class="swiper-box" :interval="3000" :duration="1000"  >
					<block v-if="orderList.length > 0">
						<swiper-item class="swiper-item" v-for="(orderInfo,index) in orderList" :key="index" v-if="orderInfo.ref_status_fb != 2 && orderInfo.status != 5"  @tap="db.get('userInfo').membe_id == orderInfo.uid ? $go('/pages/my/connect?id=' + orderInfo.id) : $go('/pages/user/orderdetail?id=' + orderInfo.id)">
							<!-- <view class="new-step-box" v-if=" orderInfo.ref_status_fb == 2 && orderInfo.status == 3">
								<view class="new-step-top display-flex">
									<block v-for="(it,ix) in endStatusList" :key="ix">
										<view class="circle"
											:class="{'pass': ix < 3,'stop': ix == 3 || ix == 4}">
											<text></text>
										</view>
										<text class="line" style="width: 120rpx;" v-if="ix < endStatusList.length - 1"
											:class="{'activeLine' : ix < 2,'stopLine': ix == 2,'stopLine3': ix == 3}"></text>
									</block>
								</view>
								<view class="new-step-bot display-flex">
									<block v-for="(it,ix) in endStatusList" :key="ix">
										<text
											:class="{'pass' : ix < 3,'stop': ix == 3 || ix == 4}">
											<block >{{it}}</block>
										</text>
									</block>
								</view>
							</view>
							<view class="new-step-box" v-else-if=" orderInfo.ref_status_fb == 2 && orderInfo.status == 2">
								<view class="new-step-top display-flex">
									<block v-for="(it,ix) in endStatusList2" :key="ix">
										<view class="circle"
											:class="{'pass': ix < 3,'stop': ix == 2 || ix == 3}">
											<text></text>
										</view>
										<text class="line" style="width: 170rpx;" v-if="ix < endStatusList2.length - 1"
											:class="{'activeLine' : ix < 1,'stopLine': ix == 1,'stopLine3': ix == 2}"></text>
									</block>
								</view>
								<view class="new-step-bot display-flex">
									<block v-for="(it,ix) in endStatusList2" :key="ix">
										<text
											:class="{'pass' : ix < 3,'stop': ix == 2 || ix == 3}">
											<block >{{it}}</block>
										</text>
									</block>
								</view>
							</view>
							<view class="new-step-box" v-else-if=" orderInfo.status == 5 && orderInfo.is_acceptance == 1 && orderInfo.ss_status == 2">
								<view class="new-step-top display-flex">
									<block v-for="(it,ix) in endStatusList3" :key="ix">
										<view class="circle"
											:class="{'pass': ix < 3,'stop': ix == 2 || ix == 3}">
											<text></text>
										</view>
										<text class="line" style="width: 170rpx;" v-if="ix < endStatusList3.length - 1"
											:class="{'activeLine' : ix < 1,'stopLine': ix == 1,'stopLine3': ix == 2}"></text>
									</block>
								</view>
								<view class="new-step-bot display-flex">
									<block v-for="(it,ix) in endStatusList3" :key="ix">
										<text
											:class="{'pass' : ix < 3,'stop': ix == 2 || ix == 3}">
											<block >{{it}}</block>
										</text>
									</block>
								</view>
							</view>
							<view class="new-step-box" v-else-if=" orderInfo.status == 5 && orderInfo.is_acceptance == 1 && orderInfo.ss_status == 3">
								<view class="new-step-top display-flex">
									<block v-for="(it,ix) in endStatusList4" :key="ix">
										<view class="circle"
											:class="{'pass': ix < 3,'stop': ix == 4 || ix == 3}">
											<text></text>
										</view>
										<text class="line" style="width: 120rpx;" v-if="ix < endStatusList4.length - 1"
											:class="{'activeLine' : ix < 3,'stopLine': ix == 2,'stopLine3': ix == 3}"></text>
									</block>
								</view>
								<view class="new-step-bot display-flex">
									<block v-for="(it,ix) in endStatusList4" :key="ix">
										<text
											:class="{'pass' : ix < 3,'stop': ix == 3 || ix == 4}">
											<block >{{it}}</block>
										</text>
									</block>
								</view>
							</view>
							<view class="new-step-box" v-else-if=" orderInfo.status !=5">
								<view class="new-step-top display-flex">
									<block v-for="(it,ix) in statusList" :key="ix">
										<view class="circle"
											:class="{'pass' : orderInfo.status > ix -1,'stop': (orderInfo.res_status && orderInfo.status == ix) || (orderInfo.ref_status && orderInfo.status == ix  && orderInfo.is_tk == 0)}">
											<text></text>
										</view>
										<text class="line" v-if="ix < statusList.length - 1"
											:class="{'activeLine' : orderInfo.status > ix,'stopLine': (orderInfo.res_status && orderInfo.status == ix + 1) || (orderInfo.ref_status && orderInfo.status == ix + 1 && orderInfo.is_tk == 0)}"></text>
									</block>
								</view>
								<view class="new-step-bot display-flex">
									<block v-for="(it,ix) in statusList" :key="ix">
										<text
											:class="{'pass' : orderInfo.status > ix - 1,'stop': (orderInfo.res_status && orderInfo.status == ix) || (orderInfo.ref_status && orderInfo.status == ix  && orderInfo.is_tk == 0)}">
											<block v-if="orderInfo.res_status && orderInfo.status == ix">申诉中</block>
											<block v-else-if="orderInfo.ref_status && orderInfo.status == ix && orderInfo.is_tk == 0">退款中</block>
											<block v-else-if="orderInfo.ref_status && ix == 4">已退款</block>
											<block v-else-if="ix == 3 && orderInfo.is_gai == 1">修改中</block>
											<block v-else>{{it}}</block>
										</text>
									</block>
								</view>
							</view>
							<view class="new-step-box" v-else>
								<view class="new-step-top display-flex">
									<view class="circle" :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">
										<text></text>
									</view>
									<text class="line" style="width: 260rpx;"
										:class="{'activeLine' : orderInfo.status > -1,'stopLine': stopStatus == 0}"></text>
									<view class="circle" :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">
										<text></text>
									</view>
									<text class="line stopLine2" style="width: 260rpx;"
										:class="{'activeLine' : orderInfo.status > 0}"></text>
									<view class="circle">
										<text></text>
									</view>
								</view>
								<view class="new-step-bot display-flex">
									<text :class="{'pass' : orderInfo.status > -1,'stop': stopStatus == -1}">已下单</text>
									<text :class="{'pass' : orderInfo.status > 0,'stop': stopStatus == 0}">待接单</text>
									<text>已取消</text>
								</view>
							</view> -->
							
							<view class="swiper-item-top">
								<image src="https://coscdn.dreamyuewen.com/uploads/20230925/dbf809dc26327c8b6206a84053891db5.png" mode=""></image>
								<text>{{orderInfo.good && orderInfo.good.title}}</text>
							</view>
							<view class="swiper-item-bot">
								<view class="">
									<text class="price">{{Number(orderInfo.good && orderInfo.good.price).toFixed(0)}}</text>元/千字  共{{orderInfo.num}}单
								</view>
								<view class="order-btn" style="background: #ED3232;" v-if="orderInfo.ref_status == 1 && orderInfo.is_tk == 0">
									退款中
								</view>
								<view class="order-btn" style="background: #ED3232;" v-else-if=" orderInfo.res_status == 1">
									申诉中
								</view>
								<view class="order-btn" v-else-if="orderInfo.status == 1">
									待接单
								</view>
								<view class="order-btn" v-else-if="orderInfo.status == 2">
									进行中
								</view>
								<view class="order-btn" v-else-if="orderInfo.status == 3">
									定稿中
								</view>
								<view class="order-btn" v-else-if="orderInfo.status == 4">
									已完成
								</view>
							</view>
						</swiper-item>
					</block>
					
					<block v-else-if="userPageList.length">
						<swiper-item class="swiper-item"  v-for="(ite,idx) in userPageList" :key="idx">
							<view class="swiper-item-top">
								<image src="https://coscdn.dreamyuewen.com/uploads/20230925/dbf809dc26327c8b6206a84053891db5.png" mode=""></image>
								<text>{{ite.title}}</text>
							</view>
							<view class="swiper-item-bot">
								<view class="">
									<text class="price">{{Number(ite.price).toFixed(0)}}</text>元/千字  {{ite.start_shooting}}单起拍
								</view>
								<view class="order-btn" @tap="goDetail(ite.id)">
									去下单
								</view>
							</view>
						</swiper-item>
					</block>
					
					<block v-else>
						<swiper-item class="swiper-item">
							<view class="swiper-item-top">
								<image src="https://coscdn.dreamyuewen.com/uploads/20230925/dbf809dc26327c8b6206a84053891db5.png" mode=""></image>
								<text>个性签名</text>
							</view>
							<view class="swiper-item-bot">
								<view class="">
									{{userItem.signature_des || '这个用户很神秘，什么都没有留下'}}
								</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
			
	      <MessageList
	        :class="[
	          'TUI-chat-message-list',
	          !isPC && 'TUI-chat-h5-message-list',
	        ]"
			  :currentConversationID="currentConversationID"
	        :isGroup="isGroup"
	        :groupID="groupID"
	        @handleEditor="handleEditor"
	      >
	      </MessageList>
		  
		  <div class="mask-custom" v-if="isToolbarShow" @tap="isToolbarShow = false"></div>
		  
	      <MessageInputToolbar
	        v-show="isToolbarShow && currentConversationID != 'C2Cwritermsg' && currentConversationID != 'C2Chudongmsg' && currentConversationID != 'C2Cadministrator' && currentConversationID != 'C2Csysmsg'"
	        :class="[
	          'TUI-chat-message-input-toolbar',
	          !isPC && 'TUI-chat-h5-message-input-toolbar',
	        ]"
	        @insertEmoji="insertEmoji"
	      ></MessageInputToolbar>
	      <MessageInput v-if="currentConversationID != 'C2Cwritermsg' &&currentConversationID != 'C2Chudongmsg' && currentConversationID != 'C2Cadministrator'  && currentConversationID != 'C2Csysmsg'"
	        :class="[
	          'TUI-chat-message-input',
	          !isPC && 'TUI-chat-h5-message-input',
	          isUniFrameWork && 'TUI-chat-uni-message-input',
	          isWeChat && 'TUI-chat-wx-message-input',
	        ]"
	        :isMuted="false"
	        :muteText="TUITranslateService.t('TUIChat.您已被管理员禁言')"
	        :placeholder="TUITranslateService.t('请输入消息')"
	        ref="messageInputRef"
	        @handleToolbarListShow="handleToolbarListShow"
			@closeTool='closeTool'
	      ></MessageInput>
	    </div>
	    <!-- 群组管理 -->
	    <div
	      class="group-profile"
	      v-if="isUniFrameWork && isGroup && groupManageExt"
	      @click="handleGroup"
	    >
	      {{ groupManageExt.text }}
	      <!-- 更多 -->
	    </div>
	  </div>
	</div>
  </view>
</template>
<script lang="ts" setup>
import TUIChatEngine, {
  TUIGlobal,
  TUITranslateService,
  TUIConversationService,
  TUIStore,
  StoreName,
  IMessageModel,
  IConversationModel,
} from "@tencentcloud/chat-uikit-engine";
import { ref, onUnmounted } from "../../adapter-vue";
import ChatHeader from "./chat-header/index.vue";
import MessageList from "./message-list/index.vue";
import MessageInput from "./message-input/index.vue";
import MessageInputToolbar from "./message-input-toolbar/index.vue";
import TUICore, { TUIConstants, ExtensionInfo } from "@tencentcloud/tui-core";
import { isUniFrameWork } from "../../utils/is-uni";

const emits = defineEmits(["closeChat"]);
const isPC = ref(TUIGlobal.getPlatform() === "pc");
const isWeChat = ref(TUIGlobal.getPlatform() === "wechat");
const isToolbarShow = ref<boolean>(!isUniFrameWork);
const messageInputRef = ref();

const is_like = ref();

import { onShow } from "@dcloudio/uni-app";
import * as Api from '@/common/Api.js';
import * as db from '@/common/db.js';

const orderList = uni.getStorageSync('orderList');
const userPageList = uni.getStorageSync('userPageList');

const userItem = uni.getStorageSync('userItem');
is_like.value = userItem.is_like;

const stopStatus = 0;
const statusList= ['已支付', '待接单', '进行中', '定稿中', '已完成'];
const endStatusList= ['已支付','待接单','进行中','退款中','已退款'];
const endStatusList2= ['已支付','待接单','退款中','已退款'];
const endStatusList3= ['已支付','待接单','申诉中','已取消'];
const endStatusList4= ['已支付','待接单','进行中','申诉中','已取消'];
 

const currentConversationID = ref();
// 是否显示群组管理
const isGroup = ref(false);
const groupID = ref("");
const groupManageExt = ref<typeof ExtensionInfo>(undefined);

TUIStore.watch(StoreName.CONV, {
  currentConversationID: (id: string) => {
    currentConversationID.value = id;
  },
  currentConversation: (conversation: typeof IConversationModel) => {
    isGroup.value = conversation?.type === TUIChatEngine.TYPES.CONV_GROUP;
    if (isUniFrameWork && isGroup.value && groupID.value !== conversation?.groupProfile?.groupID) {
      const extList = TUICore.getExtensionList(
      TUIConstants.TUIChat.EXTENSION.CHAT_HEADER.EXT_ID,
        { filterManageGroup: isGroup.value }
      );
      groupManageExt.value = extList[0];
    }
    groupID.value = conversation?.groupProfile?.groupID;
  }
});

onUnmounted(() => {
  reset();
});

// 清空当前 conversationID
const reset = () => {
  TUIConversationService.switchConversation();
};

const closeChat = (conversationID: string) => {
  emits("closeChat", conversationID);
  reset();
};

const insertEmoji = (emojiObj: object) => {
  messageInputRef?.value?.insertEmoji(emojiObj);
};

const handleToolbarListShow = (show?: boolean) => {
  if (isUniFrameWork) {
    isToolbarShow.value = show ?? !isToolbarShow.value;
  } else {
    isToolbarShow.value = true;
  }
};

const handleEditor = (message: typeof IMessageModel, type: string) => {
  if (!message || !type) return;
  switch (type) {
    case "reference":
      // todo
      break;
    case "reply":
      // todo
      break;
    case "reedit":
      if (message?.payload?.text) {
        messageInputRef?.value?.reEdit(message?.payload?.text);
      }
      break;
    default:
      break;
  }
};

const handleGroup = () => {
  groupManageExt.value.listener.onClicked({ groupID: groupID.value });
};	

const goDetail = (id) => {
  uni.navigateTo({
	  url: '/pages/my/place?id=' + id
  })
};

import * as Common from '@/common/common.js' 
const operateFocus = (user) => {
	is_like.value = !user.is_like
	
  Api.default.request('user/userLike', {
  	uid: user.membe_id,
  }, 'POST').then((res) => {
  	if (res.code == 1) {
		console.log(userItem);
		let msg = user.is_like ? '取消成功' : '关注成功'
		Common.successToShow(msg,()=>{
			
		})
  	}
  })
};

const closeTool= ()=>{
	isToolbarShow.value = false
}
</script>


<style scoped lang="scss" src="./style/index.scss"></style>
<style lang="scss">
	.mask-custom{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(255,255,255,0);
	}
	
	page{
		background: #F2F5F2;
	}
	
	.chat-container{
		height: calc(100vh - 44px);
	}
	
	.custom-tui-conversation{
		padding-top: calc(var(--status-bar-height) + var(--window-top) + 38px);
		height: 100vh;
		box-sizing: border-box;
		background: #F2F5F2;
		
		.nav-title{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: 14px;
			font-weight: bold;
			color: #000;
		}
		
		.toonei.display-flex{
			width: calc(100% - 100rpx);
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.headpic{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				flex-shrink: 0;
			}
			.tocen{
				flex-grow: 1;
				padding: 0 18rpx 10rpx;
				.totop{
					display: flex;
					align-items: center;
					padding-bottom: 2rpx;
					.name{
						font-size: 24rpx;
						letter-spacing: 0em;
						color: #3D3D3D;
					}
					.jipic {
						width: 41px;
						height:19px;
						margin-left: 4px;
					}
					
					.biepic {
						width: 41px;
						height:19px;
						margin-left: 4px;
					}
				}
				
			}
			
			.dian {
				margin-left: 8px;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #45C4B0;
			}
			
			.txt {
				font-size: 20rpx;
				font-weight: normal;
				letter-spacing: 0em;
				padding-left: 8rpx;
				color: #45C4B0;
			}
			
			.dian2{
				margin-left: 8px;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background: #999;
			}
			.txt2{
				font-size: 20rpx;
				font-weight: normal;
				letter-spacing: 0em;
				padding-left: 8rpx;
				color: #999;
			}
		}
	}
	
	.custom-navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 15rpx 30rpx;
		box-sizing:border-box;
		padding-top: calc(var(--status-bar-height) + var(--window-top) + 10px);
		background: #fff;
		z-index: 999;
	}
	
	.swiper-box{
		display: block;
		margin: 30px auto;
		margin-bottom: 0;
		width: 345px;
		height: 72px;
		border-radius: 8px;
		// box-shadow: 0 0 10rpx 10rpx rgba(0,0,0,.05);
		// background-color: #fff;
		// box-shadow: 0 0 10rpx 10rpx rgba(0,0,0,.05);
		
		.swiper-item{
			width: 100%;
			height: 100%;
			padding: 16px 18px;
			box-sizing: border-box;
			border-radius: 8px;
			// background-color: #fff;
			// box-shadow: 0 0 10rpx 10rpx rgba(0,0,0,.05);
			
			background: url('@/static/images/chat-bg.png');
			background-size: 100% 100%;
		}
		
		.swiper-item-top{
			display: flex;
			align-items: center;
			
			image{
				width: 16px;
				height: 16px;
				margin-right: 4px;
			}
			
			text{
				font-family: 思源黑体;
				font-size: 14px;
				font-weight: bold;
				color: #3D3D3D;
			}
		}
		
		.swiper-item-bot{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: 思源黑体;
			font-size: 10px;
			color: #999999;
			
			.price{
				color: #45C4B0;
				font-size: 14px;
				font-weight: 700;
			}
			
			.order-btn{
				width: 54px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				border-radius: 12px;
				background: #45C4B0;
				font-family: 思源黑体;
				font-size: 10px;
				font-weight: bold;
				color: #fff;
			}
		}
	}
	
	.new-step-box {
		margin-top: 10rpx;
	
		.new-step-top {
			display: flex;
			align-items: center;
			justify-content: center;
	
			.line {
				width: 126rpx;
				height: 6rpx;
				background: #999999;
				border-radius: 0;
			}
	
			.activeLine {
				background: #45C4B0;
			}
	
			.stopLine {
				background: linear-gradient(to right, #45C4B0 0%, #999 50%, #ED3232 100%);
			}
	
			.stopLine2 {
				background: linear-gradient(to right, #45C4B0 0%, #999 100%);
			}
			
			.stopLine3 {
				background: linear-gradient(to right, #ED3232 0%, #ED3232 50%, #ED3232 100%);
			}
	
			.circle {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #999999;
	
				text {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #fff;
				}
			}
	
			.circle.pass {
				background-color: #45C4B0;
			}
	
			.circle.stop {
				background-color: #ED3232;
			}
		}
	
		.new-step-bot {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: Source Han Sans CN;
			font-size: 20rpx;
			font-weight: bold;
			color: #999;
	
			.pass {
				color: #45C4B0;
			}
	
			.stop {
				color: #ED3232;
			}
		}
	}
</style>
